<template>
  <div id="right-bottom"></div>
</template>

<script>
export default {
  props: {
    belongData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    belongData(newValue, oldValue) {
      this.$props.belongData = newValue;
      this.mapEchart();
    },
  },
  mounted() {
    this.mapEchart();
  },
  methods: {
    mapEchart() {
      var chartDom = document.getElementById("right-bottom");
      var myChart = this.$echarts.init(chartDom);
      var option;

      const newData = this.$props.belongData.map((item) => ({
        name: item.name,
        value: item.rate,
      }));

      option = {
        title: {
          text: "商邦行业分类",
          left: "12",
          top: "8",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        //toolbox: {
        //  show: true,
        //},
        tooltip: {
          trigger: "item",
        },
        //legend: {
        //  orient: "vertical",
        //  right: 10,
        //  top: 6,
        //  textStyle: {
        //    color: "#fff",
        //    lineHeight: 10,
        //  },
        //},

        series: [
          {
            name: "商邦行业分类",
            type: "pie",
            radius: [20, 100],
            center: ["50%", "50%"],
            roseType: "area",
            //right: 60,
            top: 20,
            itemStyle: {
              borderRadius: 2,
            },
            labelLine: {
              normal: {
                //length: 0,
              },
            },
            label: {
              normal: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            data: newData,
          },
        ],
      };

      option && myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
#right-bottom {
  width: 100%;
  height: 100%;
}
</style>
